#{extends 'main.html' /}
#{set title:'Home' /}

<div id="principal">

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="@{Application.Inicio()}" id="current">Incio</a></li>
<li><a href="@{Usuarios.zonaAdministracion()}">Full Control</a></li>
<li><a href="@{Planes.relacionPlanes(usuario.id)}">Ver Asignaturas</a></li>
<li><a href="#">Cargar Archivos</a></li>
<li><a href="@{Secure.logout()}">Log out</a></li>
</ul>
</div>

<br>
<div id="titulo"><b>BIENVENIDO ${usuario.nombre}</b></div>

<div id="info_login">
<div id="info">
<div align="center"><b>Datos Personales</b></div>
<br>

<b>Rol            : ${usuario.rol}</b><br>
<b>Nombre</b>     : ${usuario.nombre}<br>
<b>Apellido</b>   : ${usuario.apellido}<br>
<b>Codigo</b>     : ${usuario.codigo}<br>
<b>Cuenta</b>     : ${usuario.nombrecuenta}<br>
<b>Contrasena</b> : ${usuario.contrasena}<br>

<br>
<div align="center"><b>Planes de Estudio</b></div>
<b>Cantidad : </b>${usuario.listaPlanEstudio.size()}
<br>
<br>
<div align="center"><b>Asignaturas</b></div>
<br>
<div>
#{list items:usuario.listaPlanEstudio,as:'plan'}
#{list items:plan.listaCurso,as:'curso'}
<b>Curso</b>:${curso.nombrecurso}<br>
#{/list}
#{/list}
</div>
<br>
<div id="anio" align="center">
<img alt="anio" src="/public/images/anio.jpg"  style="width:200px;" />
</div>
<br>
<div align="center"><b><a href="#" class="button">Crear Plan de Estudios</a></b></div>
</div>

<div id="imagen_robot">
<img id="robot" alt="robot" src="/public/images/image_robot.jpg" />
</div>


</div>

</div>

<div id="dialog_registroPlan" align="center"  title="REGISTRO PLAN DE ESTUDIO" style="display:none;">
<form >


<div id="bloque_dialog">
<div  align="justify" style="width:150px;float:left;">Plan:</div><div style="width:200px;float:right;"><input type="text" id="nombrePlan" style="width:200px;" /></div>
</div>

<div id="bloque_dialog">
<div  align="justify" style="width:150px;float:left;">Ciclo :</div><div style="width:200px;float:right;"><input type="text" id="ciclo" style="width:200px;" /></div>
</div>

<div id="bloque_dialog">
<div align="justify" style="width:150px;float:left;">Nro. de Cursos:</div><div style="width:200px;float:right;"><input type="text" id="numerocursos" style="width:200px;" /></div>
</div>

<div id="bloque_dialog">
<div align="justify" style="width:150px;float:left;">Total creditos:</div><div style="width:200px;float:right;"><input type="text" id="totalcreditos"  style="width:200px;"/></div>
</div>

<div id="bloque_dialog">

<div align="justify" style="width:150px;float:left;">Fecha :</div><div style="width:200px;float:right;"><input type="text" id="fecha" style="width:200px;" /></div>
</div>

<div id="bloque_dialog">
<div style="width:175px;float:left;"><input type="submit" id="submit" width="150px" value="REGISTRO" /></div><div style="width:175px;float:right;"><input  type="reset" value="RESET" style="width:150px;" /></div>
</div>
</form>
</div>

<script type="text/javascript">

$(document).ready(function(){
	
	
	$('.button').click(function(){
		$('#dialog_registroPlan').dialog({
			modal:true,
			width:400,
			height:420
		});
		
		
	});
	
	$('#fecha').datepicker();
	
	$('#submit').click(function(){
		
		var $ciclo=parseInt($.trim($('#ciclo').val()));
		var $numerocursos=parseInt($.trim($('#numerocursos').val()));
		var $totalcreditos=parseInt($.trim($('#totalcreditos').val()));
		var $id=${usuario.id};
		var $fecha=$.trim($('#fecha').val());
		
		console.log($ciclo);
		console.log($numerocursos);
		console.log($totalcreditos);
		console.log($id);
		console.log($fecha);
		
		$.post('@{Planes.registrarPlan(id,ciclo,numerocursos,totalcreditos,fecha,nombrePlan)}',{
			id:${usuario.id},
			ciclo:$ciclo,
			numerocursos:$numerocursos,
			totalcreditos:$totalcreditos,
			fecha:$('#fecha').val(),
			nombrePlan:$('#nombrePlan').val()
		});
	});	
	
	
});
</script>
